<template>
  <div class="main">
    <div class="login-up-container">
      <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane label="用户登录" name="first"></el-tab-pane>
        <el-tab-pane label="立即注册" name="second"></el-tab-pane>
        <div class="login-up-container">
          <el-form ref="userForm" :model="params">
            <!--用户昵称-->
            <el-form-item class="input-prepend restyle" prop="nickname"
                          v-if="!isLogin">
              <div>
                <el-input type="text" placeholder="用户昵称" v-model="params.nickname"/>
                <i class="iconfont icon-user"/>
              </div>
            </el-form-item>
            <!--用户手机号-->
            <el-form-item class="input-prepend restyle no-radius">
              <div>
                <el-input type="text" placeholder="手机号" v-model="params.phone" />
                <i class="iconfont icon-phone"/>
              </div>
            </el-form-item>
            <!--用户密码-->
            <el-form-item class="input-prepend restyle no-radius" prop="password"
                          v-if="isLogin">
              <div>
                <el-input type="text" placeholder="用户密码"
                          v-model="params.password" />
                <i class="iconfont icon-password"/>
              </div>
            </el-form-item>

            <!--验证码-->
            <el-form-item class="input-prepend restyle no-radius" prop="code"
                          v-if="!isLogin">
              <div style="width: 100%;display: block;float: left;position: relative">
                <el-input type="text" placeholder="验证码"
                          v-model="params.code"/>
                <i class="iconfont icon-phone"/>
              </div>
              <div class="btn" style="position:absolute;right: -10px;top: 6px;width: 40%;">
                <a href="javascript:" type="button"
                   @click="getCodeFun()"
                   :value="codeValue" style="color: orangered">
                  {{codeValue}}
                </a>
              </div>
            </el-form-item>
            <!--设置密码-->
            <el-form-item class="input-prepend" prop="password" v-if="!isLogin">
              <div>
                <el-input type="password" placeholder="设置密码" v-model="params.password"/>
                <i class="iconfont icon-password"/>
              </div>
            </el-form-item>

            <div class="btn">
              <input type="button" v-model="btn_value" class="login-up-button" @click="btnClick()">
            </div>
            <p class="login-up-msg" v-if="!isLogin">
              点击 “注册” 即表示您同意并愿意遵守简书
              <br>
              <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
              和
              <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
            </p>
          </el-form>
        </div>
      </el-tabs>
      <!-- 更多注册方式 -->
      <div class="more-sign">
        <h6>社交帐号直接注册</h6>
        <ul>
          <li> <!--微信-->
            <a id="weixin" class="weixin" target="_blank" @click="wxDialog=true">
              <i class="iconfont icon-weixin"/>
            </a>
          </li>
          <li><!--QQ-->
            <a id="qq" class="qq" target="_blank" href="#">
              <i class="iconfont icon-qq"/>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!--@opened 对话框打开后的回调-->
    <el-dialog
      :visible.sync="wxDialog"
      @opened="wxOpen"
      width="30%"
      center>
      <div id="qrCode" style="padding-left: 110px;"></div>
    </el-dialog>
  </div>
</template>
<script>
import 'assets/css/login.css'
import '~/assets/css/iconfont.css'
import registerApi from "@/api/register";
import loginApi from "@/api/login";
import cookie from 'js-cookie';
export default {
  layout: 'loginLayout',
  head: {
    script: [
      {src: 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'}
    ]
  },
  data () {
    return {
      isLogin:true, //记录当前是否为登录状态
      activeName: 'first', //记录当前选择的tabs
      params: { //封装注册输入数据
        phone: '',
        code: '',  //验证码
        nickname: '',//用户昵称
        password: ''
      },
      isSend: false,      //是否发送验证码
      second: 60,        //倒计时间
      codeValue: '获取验证码',
      btn_value:'登录',
      wxDialog:false
    }
  },
  methods: {
    wxCreate(){
      var obj = new WxLogin({
        self_redirect:true,
        id:"qrCode",
        appid: "wx92b6693b8c01fc87",
        scope: "snsapi_login",
        redirect_uri: "http://www.sphskla.cn/services_user/user/wx/callBack",//公网地址
        state: "fm",
        style: "black",
        href: ""
      });
    },

    wxOpen(){
      //生成登录二维码
      this.wxCreate();
      //验证是否已经扫码
      loginApi.checkLogin().then(response => {
        if (response.success){
          //携带token跳转到首页
          this.$router.push({ path:'/',query:{token:response.data.token}})
        }else {
          this.$message({
            type: 'error',
            message: "登录失败, 请重试"
          });
          this.wxOpen();
        }
      })
    },

    btnClick() {
      if (this.isLogin){/*登录*/

        loginApi.login(this.params).then(res=>{
          console.log(res);
          if(res.success){
            //把token存在cookie中
            cookie.set('login_token', res.data.token, { domain: 'localhost' })
            //登录成功根据token获取用户信息
            loginApi.getLoginInfo().then(response => {
              //将用户信息记录cookie
              cookie.set('portal_user', response.data.userInfo, { domain: 'localhost' })
              //跳转页面
              window.location.href = "/";
            })
          }
        });


      }else {/*注册*/
        registerApi.register(this.params)
          .then(response => {
            //提示注册成功
            this.$message({
              type: 'success',
              message: "注册成功"
            })
            //跳转登录页面
            this.activeName = "first";
            this.isLogin = true;
            this.btn_value = "登录";
          })
      }
    },

    timeDown() {/*获取验证码*/
      let result = setInterval(() => {
        --this.second;
        this.codeValue = this.second+"秒后重发";
        if (this.second < 1) {
          clearInterval(result);
          this.isSend = false;
          this.second = 60;
          this.codeValue = "获取验证码"
        }
      }, 1000);

    },

    //通过输入手机号发送验证码
    getCodeFun() {
      if (!this.isSend){
        registerApi.sendCode(this.params.phone)
          .then(response => {
            //调用倒计时的方法
            this.timeDown()
            this.isSend = true;
            //提示注册成功
            this.$message({
              type: 'success',
              message: "短信发送成功"
            });
          })
      }
    },

    handleClick(tab, event) {
      if (tab.index == 0){
        this.isLogin = true;
        this.btn_value = "登录";
      }else {
        this.isLogin = false;
        this.btn_value = "注册";
      }
    },
    checkPhone (rule, value, callback) {
      if (!(/^1[34578]\d{9}$/.test(value))) {
        return callback(new Error('手机号码格式不正确'))
      }
      return callback()
    },
  }
}
</script>
<style></style>
